import Taro, { useState, useEffect } from '@tarojs/taro'
import { View, Image, Input } from '@tarojs/components'
import api from '../../api/index'
import useLoading from "../../hooks/useLoading";
import { READ1000_USER_INFO, ORGANIZATION ,set, get} from '../../globalData'
import RButton from "../../components/rButton";
import './index.scss'

export default function Index() {
  const [mobile, setMobile] = useState('')
  const [password, setPassword] = useState('')
  const [isShowPassword, setIsShowPassword] = useState(false)
  const [tips, setTips] = useState('')
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    Taro.hideHomeButton()
  }, [])

  function handleClickEye() {
    setIsShowPassword(!isShowPassword)
  }

  async function handleSubmit() {
    if (!mobile || mobile.length !== 11) {
      setTips('请输入正确手机号码')
      return
    }

    if (!password) {
      setTips('请输入密码')
      return
    }

    if (loading) {
      return
    }

    try{
      setLoading(true)
      Taro.showLoading()
      const res = await api.user.login({
        mobile,
        password,
        org_id: get(ORGANIZATION)
      })
      setLoading(false)
      Taro.hideLoading()
      if (res.code > 0) {
        Taro.showToast({
          title: '登录成功'
        })
        set(READ1000_USER_INFO, JSON.parse(res.data))
        Taro.setStorageSync(READ1000_USER_INFO, {
          ...JSON.parse(res.data),
          timeStamp: new Date().getTime(),
        })
        console.log('缓存登录信息')
        Taro.switchTab({
          url: '/pages/cash/index'
        })
      } else if (res.code === -1){
        setTips(res.data)
      }
    } catch (e) {
      setLoading(false)
      Taro.showToast({
        title: '登录失败',
        icon: 'none'
      })
    }
  }

  function setValue(e, _setValue) {
    if (tips) {
      setTips('')
    }

    _setValue(e.detail.value)
  }

  function handleInput(e, fn) {
    setValue(e, fn)
  }

  return (
    <View className='login-page'>
      <View className='form-container'>
        <View className='form-group'>
          <Image className='icon' src={require('../../assets/mobile44X44@2x.png')} />
          <Input
            className='input'
            type='number'
            maxLength='11'
            placeholder='请输入注册手机号码'
            value={mobile}
            // onChange={e => handleInput(e, setMobile)}
            onInput={e => handleInput(e, setMobile)}
          />
        </View>

        <View className='form-group'>
          <Image className='icon' src={require('../../assets/password44X44@2x.png')} />
          <Input
            className='input'
            type={isShowPassword ? 'text' : 'password'}
            placeholder='请输入密码'
            value={password}
            // onChange={e => handleInput(e, setPassword)}
            onInput={e => handleInput(e, setPassword)}
          />

          {
            isShowPassword ? (
            <Image className='eye' src={require('../../assets/openEye36X36@2x.png')} onClick={() => handleClickEye()} />
            ) : (
            <Image className='eye' src={require('../../assets/closeEye36X36@2x.png')} onClick={() => handleClickEye()} />
            )
          }
        </View>
      </View>
      {
        tips && (
          <View className='tips' >{ tips }</View>
        )
      }

      <View className='btn'>
        <RButton onClick={() => handleSubmit()}>登录千读账号</RButton>
      </View>

      <View className='forgetPassword'>
        忘记密码
      </View>
    </View>
  )
}

Index.config = {
  navigationBarTitleText: '账号登录',
  backgroundColor: '#fff',
}
